<template>
  <el-dialog title="关联机械"
             :visible.sync="dialogForm"
             width="1100px">
    <base-list ref="mechanics"
               :condition="condition"
               :datas.sync="mechanics"
               :pageSearch="pageSearch">
      <el-form slot="search"
               :inline="true"
               :model="condition"
               class="search-form"
               label-width="80px">
        <el-row>
          <el-col :span="8"
                  class="search-width4">
            <el-form-item label="机械名称">
              <auto-search-machine @selectName="v=>condition['search_LIKE_resourceName']=v"></auto-search-machine>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  class="search-width4">
            <el-form-item label="所属单位"
                          prop="orgId">
              <auto-search-org v-model="form.orgId"
                               @select="v=>{form.orgId=v;form.deptId='';form.deptName='';}"
                               @selectName="v=>form.orgName=v"
                               :disabled="true"
                               :name="form.orgName"></auto-search-org>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="loadData"
                       class="ml-80">查 询</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-table slot="list"
                ref="multipleTable"
                :data="mechanics"
                border
                stripe
                max-height="500"
                @selection-change="handleSelectionChange">

        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column type="index"
                         label="序号"
                         width="55">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="resourceName"
                         label="机械名称"
                         min-width="130"></el-table-column>
        <el-table-column prop="typeName"
                         label="机械类型"
                         min-width="130"></el-table-column>
        <el-table-column prop="categoryName"
                         label="机械类别"
                         min-width="200"></el-table-column>
        <el-table-column prop="orgName"
                         label="所属单位"
                         min-width="200"></el-table-column>
        <el-table-column prop="deptName"
                         label="所属部门"
                         min-width="120">
        </el-table-column>
      </el-table>

    </base-list>

    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getJobMachineryList } from '@/api/baseResource/baseResource'
import { contactList } from '@/api/warehouseOperationPoint/warehouseOperationPoint'
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import autoSearchMachine from '@/components/autocomplete/autoSearchMachine'

export default {
  name: 'mechanics',
  components: {
    autoSearchOrg,
    autoSearchMachine
  },
  data() {
    return {
      form: this.clearForm(),
      condition: {}, // 查询条件
      mechanics: [], // table数组
      pageSearch: getJobMachineryList, // 分页查询api接口
      dialogForm: false,
      checked: true,
      multipleSelection: []
    }
  },
  // beforeUpdate() {
  //   this.$nextTick(function() {
  //     this.loadData()
  //   })
  // },
  mounted() {
    getJobMachineryList().then(res => {
      this.mechanics = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        id: '',
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name
      }
    },
    loadData() {
      this.$refs.mechanics.loadData()
    },
    // 保存
    handleSubmit() {
      contactList(this.form.id, { machines: this.multipleSelection }).then(
        res => {
          this.$message({ message: '机械关联成功!', type: 'success' })
          this.dialogForm = false
          this.$emit('mload')
        }
      )
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //获取已关联的机械
    rectMechanics(val) {
      this.form.id = val.id
      this.$nextTick(function() {
        if (val.machines) {
          if (this.$refs.multipleTable) {
            this.$refs.multipleTable.clearSelection()
          }
          this.mechanics.forEach(row => {
            for (let item of val.machines) {
              if (item.resourceName === row.resourceName) {
                this.$nextTick(function() {
                  this.$refs.multipleTable.toggleRowSelection(row, true)
                })
              }
            }
          })
        } else {
          this.$refs.singleTable.clearSelection()
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
